<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="margin-bottom:10px;display: inline-block;">
                <span style="margin-right: 12px;">泵送队</span>
                <el-input v-model="tableParam.pumpingTeam" style="width: 200px;max-width: 150px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;margin-bottom:10px;display: inline-block;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.engineeringName" style="width: 200px%;max-width: 150px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;margin-bottom:10px;display: inline-block;">
                <span style="margin-right: 12px;">泵自编号</span>
                <el-input v-model="tableParam.pumpNo" style="width: 200px;max-width: 150px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;margin-bottom:10px;display: inline-block;">
                <span style="margin-right: 12px;">泵类型</span>
                <el-select v-model="tableParam.pumpTypeId" style="width: 200px;max-width: 150px;" placeholder="请选择">
                  <el-option v-for="item in pumpTypeArr" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
                </el-select>
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">浇筑时间</span>
                <el-date-picker v-model="startTimDateEndTimDate" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" @change="tableParam.pouringTime=startTimDateEndTimDate?startTimDateEndTimDate[0]:'',tableParam.endPouringTime=startTimDateEndTimDate?startTimDateEndTimDate[1]:''"></el-date-picker>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                  <template slot-scope="scope">
                    <span v-if="item.label == '图算添加人'">{{scope.row.registeredAddress|stationsFun }}</span>
                    <div v-else-if="item.label == '调度'">
                      <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DIAODU'))!==-1" class="table_link" :underline="false" @click="ToViewFun(scope.row)">调度</el-link>
                    </div>

                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 调度 -->
    <el-dialog v-dialogDrag :visible.sync="ToViewType" width="1000px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">泵车调度</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :rules="rules" :inline="true" :model="formData" label-width="110px">
          <el-form-item label="泵自编码">
            <el-input v-model="formData.pumpNo" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="泵类型">
            <el-input v-model="formData.pumpTypeName" disabled clearable></el-input>
          </el-form-item>
          <el-form-item label="东风车">
            <el-input v-model="formData.carTypeName" disabled clearable></el-input>
          </el-form-item>
          <el-form-item label="司机">
            <el-input v-model="formData.driverName" disabled clearable></el-input>
          </el-form-item>
          <el-form-item prop="dispatchType" label="调度类型">
            <el-select v-model="formData.dispatchType" placeholder="请选择">
              <el-option v-for="item in dispatchTypeList" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="调度描述">
            <el-input v-model="formData.remark" :rows="5" resize="none" style="width: 760px;" type="textarea" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="ToViewType = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit()">通知司机</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { getDicType } from "@/api/common.js";
import { queryPage, save_inform_driver } from "@/api/smart/schedul/i.js";
import { getUserId } from '@/utils/auth';
export default {
  mixins: [mixin],
  data() {
    return {
      startTimDateEndTimDate: [],
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      loading: false,
      /*表格数据*/
      table: [
        {
          label: "泵自编号",
          width: "",
          prop: "pumpNo",
          status: true,
        },
        {
          label: "泵类型",
          width: "",
          prop: "pumpTypeName",
          status: true,
        },
        {
          label: "作业单位",
          width: "",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "浇筑时间",
          width: "",
          prop: "pouringTime",
          status: true,
        },
        {
          label: "所在工程",
          width: "",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "泵送队",
          width: "",
          prop: "pumpingTeam",
          status: true,
        },
        {
          label: "调度",
          width: "",
          prop: "",
          status: true,
        },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        dispatchType: [
          { required: true, message: "请选择调度类型", trigger: "blur" },
        ],
      },
      formData: {},
      pumpTypeArr: [],
      dispatchTypeList: [],
      id: "",
      ToViewType: false,
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = { ...this.tableParam, name: "", linkman: "" };
    this.tableParam.pumpingTeamId = getUserId();
    this.gettableData();
    getDicType({ code: "castingType" }).then((res) => {
      this.pumpTypeArr = res.data.items; //
    });
    getDicType({ code: "dispatchType" }).then((res) => {
      this.dispatchTypeList = res.data.items; //
    });
  },
  methods: {
    submit() {
      this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          this.formData.planId = this.id;
          save_inform_driver(this.formData).then((res) => {
            if (res.code == 1001) {
              this.ToViewType = false;
              this.$message({
                message: "调度成功",
                type: "success",
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    ToViewFun(e) {
      this.$data.formData = this.$options.data().formData
      this.ToViewType = true;
      this.id = e.id;
      this.formData = e;
    },
    exportDialogFun(e) {
      this.id = e.id;
      this.exportDialog = true;
    },
    init() {
      /*重置数据*/
      this.startTimDateEndTimDate = [];
      this.tableParam.endPouringTime = "";
      this.tableParam.pouringTim = "";
      this.tableParam.pumpingTeam = "";
      this.tableParam.engineeringName = "";
      this.tableParam.pumpNo = "";
      this.tableParam.pumpTypeId = "";
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.table_top {
  color: #008000;
}
.table_top:hover {
  color: #008000 !important;
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 320px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}
.table_link:hover {
  opacity: 0.8;
}
</style>